import React, { Component } from 'react'
import { Form, Input, Button } from 'antd-mobile'
import md5 from 'md5'

import {loginFn} from '../../api/login'

import { connect } from 'react-redux'
import {REQUEST_LOGIN} from '../../store/types'

class Index extends Component {
  render() {
    return (
      <div className='box'>
        <header className='header'> 登录 </header>

        <div className='content'>
          <Form 
          layout='horizontal' 
          mode='card' 
          footer={<Button block color='danger' type='submit' >登录</Button>}
          onFinish={(values)=>{
            // console.log(values);
            
            this.props.login(values)

            // 密码的验证，因为我们的密码简单方便测试，所以没加
            // if(!/^\S*(?=\S{6,})(?=\S*\d)(?=\S*[A-Z])(?=\S*[a-z])(?=\S*[!@#$%^&*? ])\S*$/.test(values.password)){
            //   console.log('请输入大于 6 位且包含一个大写一个小写字母和一个特殊符号的密码');
            //   return
            // }

            /*
              MD5 密码加密：
              1. 安装 npm i md5
              2. 导入 import md5 from 'md5'
              3. 加密 md5('千峰123前@端456教育')
              加密一定要是在没有发生数据请求之前，由前端进行加密
              加密的时候可以将密码字符串裁剪为多段，然后拼接一些特殊字符，然后进行加密
              这样做的目的是为了防止用户密码过于简单。
              一定要记得注册时的加密方式要和登录时一模一样
            */ 
              // console.log(md5('千峰123前@端456教育'));
              // values.password = md5(values.password)

              // 发送数据请求，进行登录


          }}
          >
            
            {/* 如果需要加表单的验证，要先设置 name 属性 */}
            <Form.Item name={'loginname'} label='用户名' rules={[{
              required: true, 
              pattern: /^(?:(?:\+|00)86)?1[3-9]\d{9}$/,
              message: '请输入正确手机号'
              }]}>
              <Input placeholder='请输入' />
            </Form.Item>

            <Form.Item name={'password'} label='密码'>
              <Input placeholder='请输入' type={'password'} />
            </Form.Item>


          </Form>


        </div>
      </div>
    )
  }
}

export default connect(null, (dispatch)=>{
  return {
    login(values){
      dispatch({type: REQUEST_LOGIN, payload: values})
    }
  }
})(Index)